<template>
  <div id="app">
    <!-- 简化版Header组件 -->
    <header class="simple-header">
      <div class="logo">Vue App</div>
      <nav>
        <a href="#">首页</a>
        <a href="#">关于</a>
        <a href="#">服务</a>
        <a href="#">联系我们</a>
      </nav>
    </header>
    <main>
      <h1 style="color: #333; text-align: center; margin-top: 50px;">Vue应用正在运行</h1>
      <p style="text-align: center; color: #666;">页面内容显示正常</p>
    </main>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 简单的样式确保内容可见 */
.simple-header {
  background-color: #4fc08d;
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.simple-header .logo {
  font-size: 24px;
  font-weight: bold;
}

.simple-header nav a {
  color: white;
  text-decoration: none;
  margin-left: 20px;
}
</style>